<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-25 14:03:53
 * @LastEditTime: 2023-06-28 12:38:44
 * @FilePath: \my-project\src\components\HeaderBar.vue
-->
<template>
    <header class="cq-header">
        <div :class="{nav: '/index' === $route.path}">
            <div class="top-con w1100 clearfix">
                <h1 class="logo f-left"><a href="#"></a></h1>
                <ul class="navigation clearfix">
                    <li v-for="item in navList" :key="item.id" :class="{'pull-list':item.children, 'icon-font':item.children, 'tc':item.children}">
                      <router-link :to="item.router" exact>{{item.content}}</router-link>
                        <ul class="pull-con-item" v-if="item.children" :class="{active: '/index' === $route.path, normal:'/index' !== $route.path}">
                            <li v-for="value in item.children" :key="value.id">
                                <a href="#">{{value.content}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>
</template>
<script>
export default {
  components:{},
  data(){
    return {
      navList: [
        {
          id: 0,
          content: '关于我们',
          router: '/aboutUs'
        },
        {
          id: 1,
          content: '新闻动态',
          router: '/news'
        },
        {
          id: 2,
          content: '行业案例',
          router: '/case'
        },
        {
          id: 3,
          content: '橙权益',
          router: '/equities'
        },
        {
          id: 4,
          content: '橙品牌',
          router: '#',
          children: [
            {
          id: 0,
          content: '橙金融'
        },
        {
          id: 1,
          content: '橙积分'
        },
        {
          id: 2,
          content: '橙营销'
        },
        {
          id: 3,
          content: '橙福利'
        }
          ]
        },
        {
          id: 5,
          content: '首页',
          router: '/index'
        }
      ],
      active: true
    }
  },
created(){
},
mounted(){},
watch:{
  // $route(to, from)
  // {
  //   console.log(to, from);
  //   console.log(this.$route.path);
  // }
},
computed:{

},
methods:{

},
}
</script>
<style lang="scss" scoped>

.nav {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  
  .logo a {
  background: url(../assets/images/logo-rev.png) no-repeat center/cover;
  }
  .top-con li a {
  color: #c8c8c8;
  &:hover {
  color: #ff7200;
}
}
  .icon-font:after {
    color: #fff;
  }
}

.logo a {
  display: block;
  width: 92px;
  height: 36px;
  background: url(../assets/images/logo.png) no-repeat center/cover;
  margin-top: 22px;
}
.top-con li a {
  color: #333;
  &:hover {
  color: #ff7200;
}
}
.top-con .pull-list {
  width: 50px;
}

.icon-font:after {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  content: "\e6b9";
  font-family: "iconfont" !important;
  color: #333;
  font-size: 16px;
  transform: rotate(0deg);
  transition: .2s linear;
}

.icon-font-my {
  position: relative;
}

.active {
  background: rgba(0, 0, 0, .4);
}

.normal {
  background: rgb(255, 255, 255);
}

.icon-font-my:after {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 25px;
  content: "\e6b9";
  font-family: "iconfont" !important;
  font-size: 16px;
  transform: rotate(-90deg);
  transition: transform .5s linear;
}

.icon-font-mf5 {
  position: relative;
}

.icon-font-mf5:after {
  position: absolute;
  z-index: 9999;
  top: 1px;
  right: 25px;
  content: "\e6b9";
  font-family: "iconfont" !important;
  font-size: 16px;
  transform: rotate(-90deg);
  transition: transform .5s linear;
}

.top-con .pull-list {
  .pull-con-item li {
  float: none;
  height: 35px;
  line-height: 35px;
}

  &:hover.icon-font:after {
  transform: rotate(180deg);
}
  &:hover .pull-con-item {
  visibility: visible;
  max-height: 150px;
}
  .pull-con-item {
  position: absolute;
  z-index: 999;
  top: 78px;
  left: -10px;
  box-sizing: border-box;
  width: 120px;
  height: 150px;
  padding: 5px 0;
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  transition: .2s linear;
  border-radius: 4px;
}
}

</style>